<template>
  <div class="qunzhongyijian">
    <div class="bnt">
      <div class="topbnt_left fl">
        <ul>
          <li hidden>
            <router-link to="" class="topbtnstyle"></router-link>
          </li>
          <li hidden>
            <router-link to="" class="topbtnstyle"></router-link>
          </li>
          <li hidden>
            <router-link to="" class="topbtnstyle"></router-link>
          </li>
        </ul>
      </div>
      <h1 class="tith1 fl">群众意见建议</h1>
      <div class="fr topbnt_right">
        <ul>
          <li hidden>
            <router-link to="" class="topbtnstyle"></router-link>
          </li>
          <li hidden>
            <router-link to="" class="topbtnstyle"></router-link>
          </li>
          <li class="li1">
            <router-link to="/shouye" class="topbtnstyle">返回</router-link>
          </li>
        </ul>
      </div>
    </div>
    <div class="biaogediv">
      <dv-border-box-10>
        <div class="biaogeneirong">
          <div class="dingbuxuanzekuang">
            <!-- 市 -->
            <span class="xuanzekuangqianwenzi">
              {{ $store.state.quname }}:</span
            >
            <!-- 区选择器 -->
            <span class="xuanzekuangqianwenzi">区:</span>
            <quselect v-on:selectqufangfa="selectqufangfa"></quselect>
            <!-- 镇选择器 -->
            <span class="xuanzekuangqianwenzi">镇:</span>
            <zhenselect
              v-on:selectzhenfangfa="selectzhenfangfa"
              ref="zhen"
            ></zhenselect>
            <!-- 村选择器 -->
            <span class="xuanzekuangqianwenzi">村:</span>
            <cunselect
              v-on:selectcunfangfa="selectcunfangfa"
              ref="cun"
            ></cunselect>
            <!-- 状态 -->
            <span class="xuanzekuangqianwenzi">状态:</span>
            <el-select
              v-model="biaogeqingqiucanshu.zhuangtai"
              placeholder="请选择状态"
            >
              <el-option
                v-for="item in zhuangtais"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
            <!-- 类别 -->
            <span class="xuanzekuangqianwenzi">类别:</span>
            <leibieselect
              v-on:selectleibiefangfa="selectleibiefangfa"
              :shujus="leibieshuju"
            ></leibieselect>
            <!-- 时间选择器 -->
            <span class="xuanzekuangqianwenzi">时间段:</span>
            <shijianslect
              v-on:selectshijianfangfa="selectshijianfangfa"
            ></shijianslect>
          </div>
          <div class="biaoge">
            <qunzhongyijianbiaoge
              ref="qunzhongyijianbiaoge"
              v-on:setfenyetotal="setfenyetotal"
              :fenyexinxi="fenyexinxi"
              :biaogeqingqiucanshu="biaogeqingqiucanshu"
            ></qunzhongyijianbiaoge>
          </div>
          <div class="fenye">
            <fenye
              ref="fenye"
              :fenyexinxi="fenyexinxi"
              v-on:fenyegaibian="fenyegaibian"
            ></fenye>
          </div>
        </div>
      </dv-border-box-10>
    </div>
  </div>
</template>
<script>
import zhenselect from "../../components/selectitem/zhenselect";
import cunselect from "../../components/selectitem/cunselect";
import quselect from "../../components/selectitem/quselect";
import shijianslect from "../../components/selectitem/shijanselect";
import leibieselect from "../../components/selectitem/leibieselect";
import qunzhongyijianbiaoge from "../../components/yemianbiaoge/qunzongyijianbiaoge";
import fenye from "../../components/fenye/fenye";

export default {
  data() {
    return {
      cishu: 0,
      selectzhen: "",
      // 分页信息
      fenyexinxi: { total: 0, currentPage: 1, pagesize: 8 },
      biaogeqingqiucanshu: {
        selectqu: "",
        selectzhen: "",
        selectcun: "",
        selectshijian: [],
        leibie: "1",
        zhuangtai: "2",
      },
      leibieshuju: [
        { label: "全部类别", value: "6" }, 
        { label: "资金", value: "0" },
        { label: "资产", value: "1" },
        { label: "资源", value: "2" },
        { label: "党务", value: "3" },
        { label: "村务", value: "4" },
        { label: "其他", value: "5" },
      ],
      zhuangtais: [
        { label: "全部处理情况", value: "2" },
        { label: "已处理", value: "1" },
        { label: "未处理", value: "0" },
      ],
    };
  },
  methods: {
   //选择区方法
    selectqufangfa(value) {
      this.selectqu = value + "";
      this.$refs.zhen.quxiadezhen(value);
    },
    // 选择镇触发方法
    selectzhenfangfa(value) {
      this.selectzhen = value;
      this.$refs.cun.zhenxiadecun(value);
    },
    // 选择村后触发方法
    selectcunfangfa(value) {
      this.biaogeqingqiucanshu.selectcun = value;
      this.biaogeqingqiucanshu.selectqu = this.selectqu;
      this.biaogeqingqiucanshu.selectzhen = this.selectzhen;
    },
    // 选择类别后触发方法
    selectleibiefangfa(value) {
      this.biaogeqingqiucanshu.leibie = value;
    },
    // 选择时间后触发方法
    selectshijianfangfa(value) {
      this.biaogeqingqiucanshu.selectshijian = value;
    },
    // 分页改变触发的方法
    fenyegaibian(value) {
      this.shuaxinbiaoge();
    },

    // 刷新表格
    shuaxinbiaoge() {
      this.$refs.qunzhongyijianbiaoge.gengxin();
    },
    // 设置分页的total
    setfenyetotal(total) {
      this.fenyexinxi.total = total;
    },
  },
  mounted() {},
  watch: {
    biaogeqingqiucanshu: {
      handler: function () {
        this.cishu++;
        if (this.cishu >= 3) {
          this.shuaxinbiaoge();
        }
      },
      deep: true,
    },
  },
  components: {
    // 选择框
    zhenselect,
    cunselect,
    quselect,
    shijianslect,
    leibieselect,
    // 表格
    qunzhongyijianbiaoge,

    // 分页
    fenye,
  },
};
</script>
<style lang="less" scoped>
.qunzhongyijian {
  height: 100%;
}
.topbtnstyle {
  left: 100px;
  top: 150px;
}
.li1 {
  width: 171%;
}
.biaogediv {
  padding: 30px 50px;
  height: calc(100% - 20%);
}
.biaogeneirong {
  height: 95%;
  width: 94%;
  padding: 2% 3%;
}
.dingbuxuanzekuang {
  display: flex;
  align-items: center;
}
.xuanzekuangqianwenzi {
  margin: 0 10px;
}

.biaoge {
  margin: 20px 0;
  height: 80%;
}
</style>